<script setup>
import { ref, watchEffect } from "vue";
import * as echarts from "echarts";

const props = defineProps(["data", "yUnit", "data1","color"]);
const chartRef = ref(null);

watchEffect(() => {
  if (!chartRef.value) return;
  const chart = echarts.init(chartRef.value);

  const option = {
    color: props.color,
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "4%",
      right: "4%",
      bottom: "2%",
      top: "22%",
      containLabel: true,
    },
    legend: {
      data: ["兼报人数", "报名高职分类人数", "报名全国统考人数", "总人数"],
      left: 50,
      itemWidth: 10, // 设置图例项的宽度
      itemHeight: 10, // 设置图例项的高度
      textStyle: {
        color: "#C9E9F8",
      },
    },
    xAxis: [
      {
        type: "category",
        data: ["2023年", "2024年", "2025年"],
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: false,
          lineStyle: {
            color: "#fff",
          },
        },
        axisLabel: {
          show: true,
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: "rgba(118, 118, 169, 1)",
            fontSize: 12,
          },
          interval: 0,
          formatter: function (params) {
            return params;
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#0b4f75",
            type: "dashed", // 线型为虚线
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位(人)",
        nameLocation: "end",
        nameTextStyle: {
          color: "#C9E9F8",
        },
        min: 0,
        // max: 250,
        //   interval: 50,
        //   axisLabel: {
        //     formatter: "{value} ",
        //       },
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: false,
          lineStyle: {
            color: "#fff",
          },
        },
        axisLabel: {
          show: true,
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: "rgba(118, 118, 169, 1)",
            fontSize: 12,
          },
          interval: 0,
          formatter: function (params) {
            return params;
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#0b4f75",
            type: "dashed", // 线型为虚线
          },
        },
        axisTick: {
          show: false,
        },
      },
      // {
      //   type: "value",
      //   //   name: "单位(%)",
      //   nameLocation: "end",
      //   nameTextStyle: {
      //     color: "#C9E9F8",
      //   },
      //   min: 0,
      //   max: 25,
      //   interval: 5,
      //   axisLabel: {
      //     formatter: "{value}",
      //   },
      //   axisTick: {
      //     alignWithLabel: true,
      //   },
      //   axisLine: {
      //     //坐标轴轴线相关设置。数学上的x轴
      //     show: false,
      //     lineStyle: {
      //       color: "#fff",
      //     },
      //   },
      //   axisLabel: {
      //     show: true,
      //     //坐标轴刻度标签的相关设置
      //     textStyle: {
      //       color: "rgba(118, 118, 169, 1)",
      //       fontSize: 12,
      //     },
      //     interval: 0,
      //     formatter: function (params) {
      //       return params;
      //     },
      //   },
      //   splitLine: {
      //     show: true,
      //     lineStyle: {
      //       color: "#0b4f75",
      //       type: "dashed", // 线型为虚线
      //     },
      //   },
      //   axisTick: {
      //     show: false,
      //   },
      // },
    ],
    series: [
      {
        name: "兼报人数",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value + "";
          },
        },
        data: [10.09, 19.19, 6.84],
      },
      {
        name: "报名高职分类人数",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value + "";
          },
        },
        data: [37.43, 53.2, 38.41],
      },
      {
        name: "报名全国统考人数",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value + "";
          },
        },
        data: [27.34, 34.01, 31.57],
      },
      {
        name: "总人数",
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value + "";
          },
        },
        data: [56.71, 44.51, 55.69],
      },
      // {
      //   name: "不及格率",
      //   type: "line",
      //   yAxisIndex: 1,
      //   tooltip: {
      //     valueFormatter: function (value) {
      //       return value + "%";
      //     },
      //   },
      //   data: [5.85, 2.29, 5.91, 13.32, 6.25],
      // },
    ],
  };

  chart.setOption(option);
});
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>
